<template>
  <van-nav-bar
    title="登陆"
    left-text="返回"
    left-arrow
    @click-left="onClickLeft"
  />
  <!-- <van-row justify="center" style="margin-top: 10px">
    <div>
      <img
        alt="鸿康心理"
        style="width: 120px"
        src="../imgs/20210529161139.png"
      />
    </div>
  </van-row> -->
  <div class="content">
    <van-row justify="space-around">
      <van-button type="primary" class="btnClass" plain @click="zhuce">
        注册
      </van-button>
      <van-button type="primary" class="btnClass" plain>
        <b>登陆</b>
      </van-button>
    </van-row>
    <van-field name="radio" label=" ">
      <template #input>
        <van-radio-group v-model="checked" direction="horizontal">
          <van-radio name="1"> 学生 </van-radio>
          <van-radio name="2"> 家长 </van-radio>
          <van-radio name="3"> 咨询师 </van-radio>
        </van-radio-group>
      </template>
    </van-field>
    <van-field
      v-model="state.userName"
      name="用户名"
      label=" "
      placeholder="请输入用户名"
      :rules="[{ required: true, message: '请输入用户名' }]"
    />
    <van-field
      v-model="state.password"
      name="密码"
      label=" "
      placeholder="请输入密码"
      :rules="[{ required: true, message: '请输入密码' }]"
    />
  </div>

  <van-row justify="space-around" class="login">
    <van-button type="primary" round> 立即登陆 </van-button>
  </van-row>
  <van-row class="login-btn-box" justify="space-between">
    <span class="login-btn" @click="login">手机号登陆</span>
    <span class="login-btn">忘记密码</span>
  </van-row>
</template>

<script>
import { defineComponent, ref, reactive } from 'vue'
import { useRouter } from 'vue-router'

export default defineComponent({
  components: {},
  setup() {
    const state = reactive({
      userName: '',
      password: '',
    })

    const checked = ref('1')

    const router = useRouter()

    return {
      state,
      checked,
      onClickLeft() {
        history.back()
      },
      login() {
        router.push({ name: 'Login' })
      },
    }
  },
  data() {
    return {}
  },
  methods: {
    sjdenglu() {
      this.$router.push('./views/login')
    },
    zhuce() {
      this.$router.push('./views/login/register')
    },
  },
})
</script>

<style scoped lang="less">
.btnClass {
  border: 0px;
  background-color: transparent;
}

.content {
  margin: 0 12px;
  background: #fff;
}

/deep/ .van-field__label {
  width: 0;
}

.login {
  margin: 30px 30px;
  /deep/ .van-button {
    width: 94%;
  }
}

.login-btn {
  color: #1989fa;
  font-size: 14px;
}
.login-btn-box {
  margin: 0 30px;
}
</style>
